<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'个人信息'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <view class="userItem">
      <view class="editTitle">头像</view>
      <view class="editData">
        <image
          :src="img + userInfo.headerImg"
          mode="scaleToFill"
          @click="bindUpload"
        />
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
    <view class="userItem">
      <view class="editTitle">姓名</view>
      <view class="editData" @click="tuEditName">
        <view class="mr">{{ userInfo.nickName }}</view>
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
    <view class="userItem">
      <view class="editTitle">联系电话</view>
      <view class="editData" @click="open">
        <view class="mr">{{ userInfo.phone }}</view>
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
    <view class="userItem">
      <view class="editTitle">简介</view>
      <view class="editData" @click="tuEditent">
        <view class="mr">{{
          userInfo.email ? userInfo.email : "这个人很懒什么都没留下！"
        }}</view>
        <view class="iconfont icon-icon_arrow_right"></view>
      </view>
    </view>
  </view>
  <!-- 更换联系方式 -->
  <uni-popup ref="popup" type="bottom" :is-mask-click="false">
    <view class="dataList">
      <view class="addItemTitle">
        <view class="contacts">更换联系方式</view>
        <input
          class="ctsInput"
          placeholder="联系电话"
          type="number"
          maxlength="11"
          v-model="edituserInfo.phone"
        />
        <!-- <view class="identifyingCode">
          <input class="ctsInputCode" maxlength="6" placeholder="输入验证码" />
          <button class="InputCode">获取验证码</button>
        </view> -->
        <view class="affirm">
          <view class="solid" @click="addDataList(false)">取消</view>
          <view class="" @click="addDataList(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 确认退出吗 -->
  <uni-popup ref="popup1" type="bottom" :is-mask-click="false">
    <view class="dataList">
      <view class="addItemTitle">
        <view class="contacts">确认退出吗</view>
        <view class="loginInfo"
          >退出登录后，您将无法第一时间收到最新、最全的专利动态信息</view
        >
        <view class="affirm">
          <view class="" @click="addDataList(false)">取消</view>
          <view class="solid" @click="login">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <view class="logOut" @click="logOutPopup">退出登录</view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="修改成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { ref, reactive, toRefs, inject } from "vue";
import { onLoad } from "@dcloudio/uni-app";
let popup = ref();
let popup1 = ref();
let success = ref();
let data = reactive({
  userInfo: {},
  img: "",
  edituserInfo: {
    ID: "",
    nickName: "",
    email: "",
    phone: "", //联系电话
    headerImg: "", //用户头像
  },
});
const $imgSrc = inject("$imgSrc")
const $url = inject("$url");
let { userInfo, edituserInfo,img } = toRefs(data);
onLoad(() => {
  data.img = $imgSrc
  upDataUserInfo();
});
// 更新展示用户信息
const upDataUserInfo = () => {
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      if (res.data.token.length < 1) {
        // uni.navigateTo({
        //   url: "/pages/login/login?type=1",
        // });
      }
      data.userInfo = res.data;
      data.edituserInfo.ID = res.data.ID;
      data.edituserInfo.nickName = res.data.nickName;
      data.edituserInfo.email = res.data.email;
      data.edituserInfo.phone = res.data.phone;
      data.edituserInfo.headerImg = res.data.headerImg;
    },
  });
};
const open = () => {
  popup.value.open("button-text");
};
const addDataList = (bool) => {
  if (bool) {
    editUserData();
    popup1.value.close();
    popup.value.close();
  } else {
    popup1.value.close();
    popup.value.close();
  }
};
const tuEditName = () => {
  uni.navigateTo({
    url: "/pages/editUserInfo/EditUserName/index",
  });
};
const logOutPopup = () => {
  popup1.value.open("button-text");
};
// 提交更改信息
const editUserData = () => {
  uni.request({
    url: $url + `/user/setUserInfo`,
    method: "PUT",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    data: data.edituserInfo,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open();
      getUserInfo();
    },
  });
};
// 获取用户信息
const getUserInfo = () => {
  uni.request({
    url: $url + `/user/getUserInfo`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.userInfo.token = data.userInfo.token;
      uni.setStorage({
        key: "useInfo",
        data: res.data.data.userInfo,
        success: function () {
          upDataUserInfo();
        },
      });
    },
  });
};
// 储存用户信息

// 上传图片
const bindUpload = (e) => {
  wx.chooseImage({
    success(res) {
      const tempFilePaths = res.tempFilePaths;
      wx.uploadFile({
        url: $url + "/fileUploadAndDownload/upload", //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: "file",
        header: { "Content-Type": "multipart/form-data", "x-token": data.userInfo.token },
        formData: {
          user: "test",
        },
        success(res) {
          //do something
          data.edituserInfo.headerImg = JSON.parse(res.data).data.file.url;
          editUserData();
        },
      });
    },
  });
};
const tuEditPhone = () => {
  // uni.navigateTo({
  //   url: "/pages/editUserInfo/EditUserName/index",
  // });
};
const tuEditent = () => {
  uni.navigateTo({
    url: "/pages/editUserInfo/EditUserCon/index",
  });
};
const login = () => {
  wx.clearStorage({
    success(res) {},
    fail(err) {
      console.log("退出失败！", err);
    },
  });
  uni.redirectTo({
    url: "/pages/login/login",
  });
};
</script>

<style scoped>
.content {
  position: relative;
  padding: 0 28rpx;
  padding-bottom: 90rpx;
}
.userItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #f7f7f7;
}
.editTitle {
  flex: none;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editData {
  display: flex;
  align-items: center;
}
.editData view {
  height: 72rpx;
  line-height: 72rpx;
}
.editData image {
  margin-right: 27rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}
.mr {
  margin-right: 27rpx;
  margin-left: 27rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.logOut {
  position: fixed;
  bottom: 0rpx;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 89rpx;
  background: #ffffff;
  box-shadow: 2rpx 2rpx 9rpx 0rpx #c3c3c5;
  font-size: 25rpx;
  font-weight: 400;
  color: #222222;
  padding-bottom: calc(10px + env(safe-area-inset-bottom) / 2);
}
.dataList {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 40rpx 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.identifyingCode {
  display: flex;
  justify-content: space-between;
  margin: 27rpx 21rpx 50rpx 21rpx;
}
.ctsInputCode,
.InputCode {
  display: flex;
  align-items: center;
  flex: 0 0 46%;
  width: 201rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  border: 0;
}
.ctsInputCode {
  padding-left: 16rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.InputCode {
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #1677ff;
}
.InputCode::after {
  border: 0;
  display: none;
}
.affirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo {
  text-align: center;
  padding: 50rpx 21rpx 80rpx 21rpx;
  font-size: 27rpx;
  font-weight: 400;
  color: #333333;
}
</style>
